﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端切图作业</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="JavaScript.js" defer="defer"></script>

</head>
<body>
    <!--顶部-->
    <div id="top">
        <div id="top_content">
            <ul>
                <li><a href="">Account Sign In</a> <strong>.</strong> </li>
                <li><a href="">Register</a><strong>.</strong> </li>
                <li><a href="">	Buyers Guide</a><strong>.</strong> </li>
                <li><a href="">About</a><strong>.</strong> </li>
                <li><a href="">Blog</a> <strong>.</strong> </li>
                <li><a href="">Contact</a> </li>
            </ul>
            <div id="help">
                <img id="call" src="img/Layer 47.png" /><strong>123.456.7890</strong>
                <img id="pao" src="img/Layer 48.png" /><strong><a href="">Live Help</a></strong>
                <a id="canada" href=""><img src="img/Layer 17.png" title="加拿大" /></a>
                <a id="USA" href=""><img src="img/Layer 18.png" title="美国" /></a>
            </div>
        </div>
    </div>
    <!--头部-->
    <div id="head">
        <div id="head_content">
            <img id="head_daizi" src="img/Layer 19.png" />
            <div id="shopping">
                <p>0 items in your bag</p>
                <a href="">check out</a>
            </div>
            <a id="ECOMMERCE" href="">
                <img src="img/website.png" />
            </a>
            <div class="search">
                <form action="">
                    <input class="search_1" type="text" placeholder="Search website" />
                    <input class="search_2" type="submit" value="GO" />
                </form>
            </div>
        </div>
    </div>
    <!--导航栏-->
    <div id="nav">
        <div id="nav_content">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">LATEST ARRIVALS</a></li>
                <li><a href="">MEN'S</a></li>
                <li><a href="">WOMEN'S</a></li>
                <li><a href="">KIDS</a></li>
                <li><a href="">BRANDS</a></li>
                <li><a href="">SALE</a></li>
                <li><a href="">GIFT CARDS</a></li>
                <li><a href="">FRIEEBIES</a></li>
            </ul>

        </div>
    </div>
    <!--主体-->
    <div id="body">
        <div id="body_content">
            <!--图片-->
            <div class="wrop" id="body_first_img">
                <ul class="list">
                    <li class="item active">0</li>
                    <li class="item">1</li>
                    <li class="item">2</li>
                    <li class="item">3</li>
                    <li class="item">4</li>
                </ul>
                <ul class="pointList">
                    <li class="point active"  data-index="0"></li>
                    <li class="point" data-index="1"></li>
                    <li class="point" data-index="2"></li>
                    <li class="point" data-index="3"></li>
                    <li class="point" data-index="4"></li>
                </ul>
                <button type="button" id="goPre" class="btn"><span><</span></button>
                <button type="button" id="goNext" class="btn" ><span>></span></button>
            </div>
            <!--左边列表-->
            <div id="body_list">
                <ul id="body_list0">
                    <li><h3>Browse Categories</h3></li>
                    <li><a href="">Lorem ipsum dolo</a></li>
                    <li><a href="">Amet consectetur </a></li>
                    <li><a href="">Adipiscin elit  </a></li>
                    <li><a href="">Cras suscipit lacus</a></li>
                    <li><a href="">Dapibus ante mattis  </a></li>
                    <li><a href="">Adipiscing nibh</a></li>
                    <li><a href="">Cras bibendum  </a></li>
                    <li><a href="">Porta diam elit</a></li>
                </ul>
                <div id="body_list1">
                    <p>
                        Join our newsletter list
                        to get the latest updates
                    </p>
                    <form>
                        <input type="text" />
                        <br />
                        <input type="submit" value="Join NOW" />
                    </form>


                    <div class="list_text">
                        <img src="img/Layer 25.png" />
                        <a href="">
                            Follow us on Twitter
                        </a>
                    </div>
                    <div class="list_text">
                        <img src="img/Layer 26.png" />
                        <a href="">
                            Become our fan on Facebook
                        </a>
                    </div>

                    <div class="list_text">
                        <img src="img/Layer 27.png" />
                        <a href="">
                            Connect with us on LinkedIn
                        </a><br />
                    </div>

                    <div class="list_text">
                        <img src="img/Layer 28.png" />
                        <a href="">
                            Send us your email enquiries
                        </a><br />
                    </div>
                </div>
            </div>

            <!--右边图片-->
            <div id="body_secend_img">
                <!--下拉选项-->
                <div id="body_img_top">
                    <div id="select">
                        <label>Sort by:</label>
                        <select>
                            <option>Ascending</option>
                        </select>
                        <select>
                            <option>Product Name</option>
                        </select>
                        <select>
                            <option>Brand Name</option>
                        </select>
                    </div>
                    <div id="date"><span>Items per page:   12  /  20  /  30  / 50</span></div>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 49.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 50.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 51.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 52.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 53.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 54.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 55.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 56.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 57.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 58.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 59.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <div class="photo">
                    <a href=""><img src="img/Layer 60.png" /></a>
                    <a href=""><p>Product Name<br />Price: <span>$12.99</span></p></a>
                </div>
                <!--翻页-->
                <div id="fanye">
                    <a href="">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a href="">4</a>
                    <a href="">5</a>
                    <a href="">NEXT ></a>
                    <a href="">LAST >></a>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div id="foot1">
        <div id="foot1_content">
            <img src="img/Layer 40.png" />
            <strong>Shop online with us safely & securely</strong>
            <img src="img/Layer 41.png" />
            <strong>We ship your orders anywhere!</strong>
            <div class="search">
                <form action="">
                    <input class="search_1" type="text" placeholder="Search website" />
                    <input class="search_2" type="submit" value="GO" />
                </form>
            </div>
        </div>
    </div>
    <div id="foot2">
        <div id="foot2_content">
            <div class="foot2_text">
                <br />
                <ul>
                    <li><strong><a href="">Company</a></strong></li>
                    <li><a href="">About Us</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Latest News</a></li>
                    <li><a href="">Login</a></li>
                    <li><a href="">Join Us</a></li>
                </ul>
                <ul>
                    <li><strong><a href="">Categories</a></strong></li>
                    <li><a href="">Lorem ipsum dolor sit</a></li>
                    <li><a href="">Amet consectetur</a></li>
                    <li><a href="">Latest News Adipiscin</a></li>
                    <li><a href="">Login Adipiscin</a></li>
                    <li><a href="">Join Us Adipiscin</a></li>
                </ul>
                <ul>
                    <li><strong><a href="">Company</a></strong></li>
                    <li><a href="">About Us</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Latest News</a></li>
                    <li><a href="">Login</a></li>
                    <li><a href="">Join Us</a></li>
                </ul>
                <ul>
                    <li><strong><a href="">Categories</a></strong></li>
                    <li><a href="">Lorem ipsum dolor sit</a></li>
                    <li><a href="">Amet consectetur</a></li>
                    <li><a href="">Latest News Adipiscin</a></li>
                    <li><a href="">Login Adipiscin</a></li>
                    <li><a href="">Join Us Adipiscin</a></li>
                </ul>
                <ul>
                    <li><strong><a href="">Company</a></strong></li>
                    <li><a href="">About Us</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Latest News</a></li>
                    <li><a href="">Login</a></li>
                    <li><a href="">Join Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>